<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>上传图片</title>
</head>
<body>
<div id="app">
    <el-upload action="https://yuandengta-yomall.oss-cn-shenzhen.aliyuncs.com" :data="dataObj" list-type="picture"
               :multiple="false" :show-file-list="showFileList" :file-list="fileList" :before-upload="beforeUpload"
               :on-remove="handleRemove" :on-success="handleUploadSuccess" :on-preview="handlePreview">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="fileList[0].url" alt="">
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--import  axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    import { policy } from './static/policy'
    new Vue({
        el: '#app',
        props: {
            value: String
        },
        computed: {
            imageUrl () {
                return this.value
            },
            imageName () {
                if (this.value != null && this.value !== '') {
                    return this.value.substr(this.value.lastIndexOf('/') + 1)
                } else {
                    return null
                }
            },
            fileList () {
                return [{
                    name: this.imageName,
                    url: this.imageUrl
                }]
            },
            showFileList: {
                get: function () {
                    return this.value !== null && this.value !== '' && this.value !== undefined
                },
                set: function (newValue) {
                }
            }
        },
        data () {
            return {
                dataObj: {
                    policy: '',
                    signature: '',
                    key: '',
                    ossaccessKeyId: '',
                    dir: '',
                    host: ''
                },
                dialogVisible: false
            }
        },
        methods: {
            emitInput (val) {
                this.$emit('input', val)
            },
            handleRemove (file, fileList) {
                this.emitInput('')
            },
            handlePreview (file) {
                this.dialogVisible = true
            },
            getUUID() {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
                    return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
                })
            },
            beforeUpload (file) {
                let _self = this
                return new Promise((resolve, reject) => {
                    axios.get('/oss/policy?fileName').then(response => {
                        _self.dataObj.policy = response.policy
                        _self.dataObj.signature = response.signature
                        _self.dataObj.ossaccessKeyId = response.accessid
                        _self.dataObj.key = response.data.dir + _self.getUUID() + '_${filename}'
                        _self.dataObj.dir = response.dir
                        _self.dataObj.host = response.host
                        resolve(true)
                    }).catch(err => {
                        reject(false)
                    })
                })
            },
            handleUploadSuccess (res, file) {
                console.log('上传成功...')
                this.showFileList = true
                this.fileList.pop()
                this.fileList.push({ name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name) })
                this.emitInput(this.fileList[0].url)
            }
        }
    })
</script>
<style>
    .div-center-class {
        padding: 28% 0%;
        text-align: center;
        background: beige;
    }
</style>
</html>